<template>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[100, 200, 300, 400]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)
const disabled = ref(false)
const background = ref(true)
const handleSizeChange = (sizeChange: any) => {
  console.log('handleSizeChange,', sizeChange)
}
const handleCurrentChange = (currentChange: any) => {
  console.log('handleCurrentChange', currentChange)
}
</script>

<style lang="scss" scoped></style>
